<template>
  <div id="app">

  <base-dialog>
    <template v-slot:text-message><span>登录表单</span></template>
   <template v-slot:center>
     <form>
       <div>
         <label for="userName">用户名：</label>
         <input type="text" id="userName">
       </div>
       <div>
         <label for="userPassword">密码：</label>
         <input type="password" id="userPassword">
       </div>
     </form>
   </template>
    <template v-slot:footer>
      <button type="button" class="layui-btn layui-btn-normal">确认</button>
      <button type="button" class="layui-btn layui-btn-primary">取消</button>
    </template>
    <template v-slot:close>x</template>
  </base-dialog>

    <base-dialog>
      <template v-slot:text-message>
        <span>友情提示</span>
      </template>
      <template v-slot:center>
        <span>请输入正确的手机号码</span>
      </template>
      <template v-slot:footer>
        <button type="button" class="layui-btn layui-btn-primary">关闭</button>
      </template>
      <template v-slot:close>-</template>
    </base-dialog>

    <base-dialog>
      <template v-slot:text-message>
        <span>警告</span>
      </template>
      <template v-slot:center>
        <span>您确认要退出吗</span>
      </template>
      <template v-slot:footer>
        <button type="button" class="layui-btn layui-btn-normal">确认</button>
        <button type="button" class="layui-btn layui-btn-primary">取消</button>
      </template>
      <template v-slot:close>+</template>
    </base-dialog>
  </div>
</template>
<script>
import baseDialog from "@/components/base-dialog.vue"

export default {
  name: "App",
  data() {
    return {

    }
  },
  components:{
    baseDialog
  }
}
</script>
<style lang="less">
div{
  display: flex;
  margin: 5px 0 ;
  label{
    text-align: right;
    width: 80px;
  }
}
</style>
